import type { FC, CSSProperties } from 'react';
import { List, AutoSizer, WindowScroller, type WindowScrollerChildProps } from "react-virtualized";
import Chart from "../TestAntvF2";

type ScrollerProps = WindowScrollerChildProps;

type IProps = Record<string, never>;

const rowRenderer = (param: { key: string; index: number; style: CSSProperties }) => {
  const { key, index, style } = param;
  return (
    <div key={key} style={style} data-index={index}>
      <p>Row {index}</p>
      <Chart />
    </div>
  );
};

const TestReactVirtualized: FC<IProps> = () => {
  const rowCount = 1000;
  const rowHeight = 120;
  return (
    <div>
      <WindowScroller>
        {({ height, isScrolling, registerChild, onChildScroll, scrollTop }: ScrollerProps) => (
          <AutoSizer disableHeight>
            {({ width }) => (
              <List
                autoHeight
                height={height}
                isScrolling={isScrolling}
                onScroll={onChildScroll}
                ref={(ref) => registerChild(ref as unknown as Element)}
                rowCount={rowCount}
                rowHeight={rowHeight}
                rowRenderer={rowRenderer}
                scrollTop={scrollTop}
                width={width}
              />
            )}
          </AutoSizer>
        )}
      </WindowScroller>
    </div>
  );
};

export default TestReactVirtualized;
